<template>
  <div
    class="originProject preview-form"
    style=" background:rgba(255,255,255,1); padding:40px;"
  >
    <Row :gutter="20">
      <Col :span="12">
        <div class="comCard">
          <Card dis-hover>
            <div
              class="comLabel"
              style=" padding:10px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#E6E6E6; font-weight:bold;"
            >
              <p>
                &nbsp;订单信息
              </p>
            </div>
            <div class="comSteps">
              <Steps
                direction="horizontal"
                v-on="$listeners"
                style=" padding:20px;"
              >
                <Step
                  title="填写申请表"
                  content="填写申请相关信息"
                  icon=""
                ></Step>

                <Step
                  title="提交申请"
                  content="申请表已提交，请耐心等待..."
                  icon=""
                ></Step>

                <Step
                  title="审核中"
                  content="正在审核中，请耐心等待..."
                  icon=""
                ></Step>

                <Step
                  title="审核成功"
                  content="您的申请已通过审核"
                  icon=""
                ></Step>
              </Steps>
            </div>
          </Card>
        </div>
        <div class="comCard">
          <Card dis-hover style=" margin-top:20px;">
            <div
              class="comLabel"
              style=" padding:10px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#E6E6E6; font-weight:bold;"
            >
              <p>
                &nbsp;快递信息
              </p>
            </div>
            <div class="comTimeLine">
              <Timeline style=" padding:40px; ">
                <TimelineItem color="#16B85E">
                  <Icon slot="dot" type="md-checkmark-circle"></Icon>

                  <p class="title">已签收</p>

                  <p class="time">
                    <Tag>
                      <Icon type="ios-calendar-outline" />
                      2019-10-20
                    </Tag>
                  </p>
                  <p class="timeLineMain">
                    您的订单已由本人签收。如有疑问您可以联系配送员确认。欢迎再次光临。
                  </p>
                </TimelineItem>

                <TimelineItem color="#8E8E8E">
                  <Icon slot="dot" type="ios-car"></Icon>

                  <p class="title">派送中</p>

                  <p class="time">
                    <Tag>
                      <Icon type="ios-calendar-outline" />
                      2019-11-20
                    </Tag>
                  </p>
                  <p class="timeLineMain">您的订单正在配送途中，请耐心等待。</p>
                </TimelineItem>

                <TimelineItem color="#8E8E8E">
                  <Icon slot="dot" type="ios-archive"></Icon>

                  <p class="title">运输中</p>

                  <p class="time">
                    <Tag>
                      <Icon type="ios-calendar-outline" />
                      2020-03-19
                    </Tag>
                  </p>
                  <p class="timeLineMain">
                    您的订单已到达，订单共计2个包裹，为便于您签收，待所有包裹到齐后，我们会为您一次派送，请注意查收。
                  </p>
                </TimelineItem>

                <TimelineItem color="#8E8E8E">
                  <Icon slot="dot" type="md-home"></Icon>

                  <p class="title">仓库处理中</p>

                  <p class="time">
                    <Tag>
                      <Icon type="ios-calendar-outline" />
                      2020-03-19
                    </Tag>
                  </p>
                  <p class="timeLineMain">打包完成</p>
                </TimelineItem>

                <TimelineItem color="#8E8E8E">
                  <Icon slot="dot" type="ios-list-box"></Icon>

                  <p class="title">已下单</p>

                  <p class="time">
                    <Tag>
                      <Icon type="ios-calendar-outline" />
                      2020-03-18
                    </Tag>
                  </p>
                  <p class="timeLineMain">
                    温馨提示：您的订单预计3月20日送达您手中。
                  </p>
                </TimelineItem>
              </Timeline>
            </div>
          </Card>
        </div>
      </Col>
      <Col :span="12"></Col>
    </Row>
  </div>
</template>
<script>
import selfComponents from "@/components/comm/dtTable/components";
import echarts from "echarts";
import { areaValue, areaData } from "@/libs/common";
import { chartOn, chartOff } from "@/libs/tools";
import area from "@/components/comm/area";

export default {
  components: {
    ...selfComponents,
  },
  data() {
    return {
      a73abc5d7ea66List: [
        { title: "填写申请表", content: "填写申请相关信息", icon: "" },
        { title: "提交申请", content: "申请表已提交，请耐心等待...", icon: "" },
        { title: "审核中", content: "正在审核中，请耐心等待...", icon: "" },
        { title: "审核成功", content: "您的申请已通过审核", icon: "" },
      ],
      ab8545f2bd01dList: [
        {
          title: "已签收",
          time: "2019-10-20",
          text:
            "您的订单已由本人签收。如有疑问您可以联系配送员确认。欢迎再次光临。",
          color: "#16B85E",
          icon: "md-checkmark-circle",
        },
        {
          title: "派送中",
          time: "2019-11-20",
          text: "您的订单正在配送途中，请耐心等待。",
          color: "#8E8E8E",
          icon: "ios-car",
        },
        {
          title: "运输中",
          time: "2020-03-19",
          text:
            "您的订单已到达，订单共计2个包裹，为便于您签收，待所有包裹到齐后，我们会为您一次派送，请注意查收。",
          color: "#8E8E8E",
          icon: "ios-archive",
        },
        {
          title: "仓库处理中",
          time: "2020-03-19",
          text: "打包完成",
          color: "#8E8E8E",
          icon: "md-home",
        },
        {
          title: "已下单",
          time: "2020-03-18",
          text: "温馨提示：您的订单预计3月20日送达您手中。",
          color: "#8E8E8E",
          icon: "ios-list-box",
        },
      ],
      pageRecordId: "415",
      adminAddress: "http://test.xundacloud.com:8081/xundacloudDemeAdmin",
      area,
    };
  },
  mounted() {},
  methods: {
    gotoPage(functionPath) {
      this.$router.push({ path: functionPath });
    },
  },
};
</script>
